记一次vue路由改造

原本

看看之前的路由

所有页面的路由全都注册在list中，数了下大概有800个页面了，太过冗余，下面开始动手改造吧

改造

建立modules文件夹

新建index.js，自动将目录下的所有文件引入

利用webpack的功能读取出所有文件

/**
 * 自动化处理文件：自动引入路由的核心文件
 */
const files = require.context('.', true, /\.js$/)

let configRouters = []
/**
 * inject routers
 */
files.keys().forEach(key => {
  if (key === './index.js') return
  configRouters = configRouters.concat(files(key).default) // 读取出文件中的default模块
})
export default configRouters

下面举个路由例子

/**
 * 球场路由
 */
export default [
  {
    pathname: 'BatchChangeCourtStatus',
    component: () => import('@/pages/court/BatchChangeCourtStatus')    // 球场批量订场
  }, {
    pathname: 'CourtSquare',
    title: '球场列表',
    component: () => import('@/components/base/CourtSquare')    // 球场广场列表
  }
]

导出个default数组，跟index中对应起来，不然读不到

再在总的路由index中引入modules中的index.js

import RouterModule from './modules'

通过结构到路由列表中
...RouterModule

至此，路由分层已做好了

拓展

之前的路由只有个keepalive功能，下面来进行拓展一下

const routerList = list.map(item => {
  return {
    path: '/' + item.pathname,
    name: item.pathname,
    meta: {
      keepAlive: item.keepAlive || false,
      title: item.title,
      hideTopBar: item.hideTopBar,
      requireLogin: item.requireLogin
    },
    component: item.component,
    children: item.children
  }
})

增加页面标题、隐藏项目头部引导、权限判断、隐藏微信分享功能

这里就要用到路由钩子了

router.beforeEach((to, from, next) => {
  hideWxShare()
  // 路由发生变化修改页面title
  if (to.meta.title) {
    document.title = to.meta.title
  }
  // 设置头部
  store.commit('setTopBar', !to.meta.hideTopBar)
  // 检查登录
  const haveUid = checkUid()
  if (to.meta.requireLogin) {
    if (haveUid) {
      next()
    } else {
      next({
        path: '/Login',
        query: { redirect: to.fullPath }
      })
      return
    }
  } else {
    next()
  }
})

隐藏微信分享功能

贴上代码

/**
 * 页面未加载完成时隐藏微信分享
 */
const hideWxShare = () => {
  if (_this.isWx) {
    let hrefString = location.href
    let data = {
      method: 'common_common_getSignPackage',
      url: hrefString
    }
    const Wx = window.jWeixin
    _this.$axios.post('baseApiEntry', data).then(res => {
      Wx.config({
        // debug: true,
        appId: res.appId,
        nonceStr: res.nonceStr,
        timestamp: res.timestamp,
        signature: res.signature,
        jsApiList: ['hideMenuItems']
      })
      Wx.ready(() => {
        Wx.hideMenuItems({
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:share:weiboApp',
            'menuItem:share:favorite',
            'menuItem:share:facebook',
            'menuItem:share:QZone'
          ]
        })
      })
    })
  }
}

思路就是每次进页面都跟够短请求获得appid等数据，然后在微信js桥ready情况下隐藏分享按钮

在需要的页面配置分享，同时打开分享按钮即可

title

页面title及隐藏头部链接简单，判断有没值，有值改变即可

登录判断

如果有uid则是登录了，直接next()

没有就跳登录页面，在登录页面监听登录事件，登录成功则重定向到传入的to.fullPath页面

一个小坑

这里项目有一个坑，之前路由跳转是自己封装好的，在浏览器环境用的是location.href

导致路由守卫受到影响，会触发两次页面跳转，改成vue路由跳转方式后就好了